import React, { useEffect, useState,useContext } from 'react'
import Header from '../../components/header/Header'
import { reqgetgoodsinfo, reqcartadd } from '../../request/api'
import './detail.css'
import { ReducerContext } from "../../App";
import { Toast} from 'antd-mobile';
export default function Detail(props) {
    const [list, getlist] = useState([])
    const { state } = useContext(ReducerContext);

    useEffect(() => {
        let id = new URLSearchParams(props.location.search).get('id')
        // console.log(id);
        reqgetgoodsinfo({id:id}).then(res => {
            getlist(res.data.list[0])
        })
    },[])
    const addShop = () => {
        // console.log(state.info.uid);
        let id = new URLSearchParams(props.location.search).get('id')
        reqcartadd({
            uid: state.info.uid,
            type: 1,
            goodsid: id,
            num: 1
        }).then((res) => {
            Toast.info(res.data.msg)
            props.history.push('/index/shop')
        });
    };
    return (
        <div>
            <Header title='详情'></Header>
            <div className='header'>
                <ul>
                    <li>商品</li>
                    <li>评价</li>
                    <li>详情</li>
                    <li>推荐</li>
                </ul>
            </div>
            <div className="content">
                <div className="slideshow">
                    <img src={list.img} alt="" />
                    <span className="number">8/8</span>
                </div>
                <div className="text">
                    <div className='text1'>
                        <b>&yen;</b>
                        <strong>{list.price}</strong>
                        <s>&yen;{list.market_price}</s>
                        <em>收藏</em>
                    </div>
                    <p>{list.goodsname}</p>
                    <span>11.11限时299元起</span>
                    <span>{list.description}<em className="ck">查看 <i className='iconfont icon-arrow-right'></i></em></span>
                </div>
                <div className="ticket">
                    <ul className="ul-left">
                        {/* <li>领券</li> */}
                        <li>分期</li>
                    </ul>
                    <ul className="ul-right">
                        <li>
                            <em>可选3/6/12期</em>
                            <i className="iconfont icon-arrow-right"></i>
                        </li>
                    </ul>
                </div>
            </div>

            <div className="de">
                <div className="zuoh clearfix">
                    <div className="mmm fl">
                        <i>
                            <i className='iconfont icon-wode'></i>
                            <p>客服</p>
                        </i>
                        <i><i className='iconfont icon-shangdian'></i>
                            <p>店铺</p>
                        </i>
                        <i><i className='iconfont icon-Shapecopy'></i>
                            <p>购物车</p>
                        </i>
                    </div>
                    <div className="hhh fr">
                        <div className="fl" onClick={() => addShop()}><p>加入购物车</p>
                        </div>
                        <div className="fr"><p>立即购买</p></div>
                    </div>
                </div>
            </div>
        </div>
    )
}
